<form nz-form [formGroup]="validateForm">

  <div nz-row nzGutter="72" class="form-inner">

    <div nz-col nzXs="24" nzMd="12">
      <nz-form-item nz-row nzFlex>
        <nz-form-label nzRequired class="label-width">账号</nz-form-label>
        <nz-form-control class="flex-1">
          <input nz-input formControlName="account" placeholder="请输入帐号">
          <nz-form-explain *ngIf="hasError('account')">帐号长度为5-16个字符!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col nzXs="24" nzMd="12">
      <nz-form-item nz-row nzFlex>
        <nz-form-label nzRequired class="label-width">用户名</nz-form-label>
        <nz-form-control class="flex-1">
          <input nz-input formControlName="username" placeholder="请输入用户名">
          <nz-form-explain *ngIf="hasError('username')">用户名长度为2-16个字符!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col nzXs="24" nzMd="12">
      <nz-form-item nz-row nzFlex>
        <nz-form-label nzRequired class="label-width">邮箱</nz-form-label>
        <nz-form-control class="flex-1">
          <input nz-input formControlName="email" placeholder="请输入邮箱">
          <nz-form-explain *ngIf="hasError('email')">电子邮箱地址不合法!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col nzXs="24" nzMd="12">
      <nz-form-item nz-row nzFlex>
        <nz-form-label nzRequired class="label-width">手机</nz-form-label>
        <nz-form-control class="flex-1">
          <input nz-input formControlName="mobileNumber" placeholder="请输入11位手机号码">
          <nz-form-explain *ngIf="hasError('mobileNumber')">手机号码不合法!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col nzXs="24" nzMd="12">
      <nz-form-item nz-row nzFlex>
        <nz-form-label [nzRequired]="config.isCreate" class="label-width">密码</nz-form-label>
        <nz-form-control class="flex-1">
          <input nz-input formControlName="password" (ngModelChange)="updateConfirmPassword()" type="password" placeholder="请输入密码">
          <nz-form-explain *ngIf="hasError('password')">密码长度为6-16个字符!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col nzXs="24" nzMd="12">
      <nz-form-item nz-row nzFlex>
        <nz-form-label [nzRequired]="config.isCreate" class="label-width">确认密码</nz-form-label>
        <nz-form-control class="flex-1">
          <input nz-input formControlName="checkPassword" type="password" placeholder="请再次输入密码">
          <nz-form-explain *ngIf="hasError('checkPassword')">两次密码输入不一致!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col nzXs="24" nzMd="12">
      <nz-form-item nz-row nzFlex>
        <nz-form-label nzRequired class="label-width">状态</nz-form-label>
        <nz-form-control class="flex-1">
          <nz-radio-group formControlName="isValid">
            <label nz-radio [nzValue]="true">有效</label>
            <label nz-radio [nzValue]="false">失效</label>
          </nz-radio-group>
          <nz-form-explain *ngIf="hasError('isValid')">请选择用户状态!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col nzXs="24" nzMd="12">
      <nz-form-item nz-row nzFlex>
        <nz-form-label nzRequired class="label-width">失效日期</nz-form-label>
        <nz-form-control class="flex-1">
          <nz-date-picker formControlName="expiredTime" [nzAllowClear]="false" nzClassName="width-full"></nz-date-picker>
          <nz-form-explain *ngIf="hasError('expiredTime')">请选择用户失效日期!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col nzSpan="24">
      <nz-form-item nz-row nzFlex>
        <nz-form-label nzRequired class="label-width">站点</nz-form-label>
        <nz-form-control class="flex-1">
          <nz-select formControlName="sites" nzMode="multiple" nzPlaceHolder="请选择站点">
            <nz-option *ngFor="let item of siteSrv.sites | siteOption" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
          </nz-select>
          <nz-form-explain *ngIf="hasError('sites')">请选择用户站点!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div nz-col nzSpan="24">
      <nz-form-item nz-row nzFlex>
        <nz-form-label nzRequired class="label-width">角色</nz-form-label>
        <nz-form-control class="flex-1">
          <nz-select formControlName="roles" nzMode="multiple" nzPlaceHolder="请选择角色">
            <nz-option *ngFor="let item of roleOptions" [nzLabel]="item.roleName" [nzValue]="item.id">
            </nz-option>
          </nz-select>
          <nz-form-explain *ngIf="hasError('roles')">请选择用户角色!</nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>

  </div>

</form>
